<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>demo</title>
  <!--    导入vue-->
  <script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
  <!--    ajax异步请求-->
  <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
</head>
<body>
<div id="app">
  <form  >
    <div>账号：<input type="text"  v-model="user.name"/></div>
    <div>密码：<input type="password"  v-model="user.password"/></div>
    <div><input type="button" value="注册" @click="register" /> </div>
  </form>
</div>
<script>
  //vue数据模型
  const app = {
    data() {
      return {
        urlPrefix:"/mvc",
        //用户对象
        user: {
          id:null,
          name: null,
          password: null,
        }
      }
    },
    //事件方法
    methods: {
      //注册用户
      register() {
        axios.post(this.urlPrefix+'/user/registerSubmit',this.user)
        .then((response)=>{
          //如果成功
          //JSON.stringify 是把js对象转换成json字符串
          //JSON.parse   可以把json字符串转换成js对象
          // alert(JSON.stringify(response));
          let b = response.data;
          if(b){
            //true  注册成功
            window.location.href = "login.html";
          }else{
            alert("注册失败");
          }
        })
        .catch((error)=> { // 请求失败处理
          // alert(JSON.stringify(error));
          alert(error.response.data.msg);
        });
      },
    }
  }
  //创建一个vue管理的数据模型  绑定html模板视图
  Vue.createApp(app).mount('#app')
</script>
</body>
</html>